<template>
  <view
    class="tui-slide-vcode"
    :style="{
      width: slideBarWidth + 'px',
      height: slideBlockWidth + 'px',
      backgroundColor: backgroundColor
    }"
  >
    <text
      class="tui-text-flashover"
      :style="{ fontSize: size + 'rpx', background: getBgColor }"
      >拖动滑块验证</text
    >
    <!-- #ifdef APP-PLUS || MP-WEIXIN || H5 -->
    <view class="tui-slide-glided" :style="{ backgroundColor: activeBgColor }">
      <text
        :style="{ fontSize: size + 'rpx', color: activeColor }"
        v-if="isPass"
        >{{ passText }}</text
      >
      <view
        v-else
        :style="{
          width: slideBarWidth + 'px',
          height: slideBlockWidth + 'px',
          fontSize: size + 'rpx'
        }"
        class="tui-active__text"
        >拖动滑块验证</view
      >
    </view>
    <view
      class="tui-slider-block"
      :style="{
        width: slideBlockWidth + 'px',
        height: slideBlockWidth + 'px',
        borderColor: isPass ? activeBorderColor : borderColor
      }"
      :change:prop="parse.slidereset"
      :prop="reset"
      :data-slideBarWidth="slideBarWidth"
      :data-slideBlockWidth="slideBlockWidth"
      :data-errorRange="errorRange"
      :data-disabled="disabled"
      @touchstart="parse.touchstart"
      @touchmove="parse.touchmove"
      @touchend="parse.touchend"
    >
      <text
        class="tui-slide-icon tui-icon-double_arrow"
        :style="{ fontSize: iconSize + 'rpx', color: arrowColor }"
        v-if="!isPass"
      ></text>
      <text
        class="tui-slide-icon tui-icon-check_mark"
        :style="{ fontSize: iconSize + 'rpx', color: checkColor }"
        v-if="isPass"
      ></text>
    </view>
    <!-- #endif -->

    <!-- #ifndef APP-PLUS || MP-WEIXIN || H5 -->
    <view
      class="tui-slide-glided"
      :style="{ backgroundColor: activeBgColor, width: slipOverWidth + 'px' }"
    >
      <text
        :style="{ fontSize: size + 'rpx', color: activeColor }"
        v-if="isPass"
        >{{ passText }}</text
      >
      <view
        v-else
        :style="{
          width: slideBarWidth + 'px',
          height: slideBlockWidth + 'px',
          fontSize: size + 'rpx'
        }"
        class="tui-active__text"
        >拖动滑块验证</view
      >
    </view>
    <view
      class="tui-slider-block"
      :class="{ 'tui-slider__reset': resetAni }"
      :style="{
        width: slideBlockWidth + 'px',
        height: slideBlockWidth + 'px',
        borderColor: isPass ? activeBorderColor : borderColor,
        transform: transform
      }"
      @touchstart="touchstart"
      @touchmove.stop.prevent="touchmove"
      @touchend="touchend"
    >
      <text
        class="tui-slide-icon tui-icon-double_arrow"
        :style="{ fontSize: iconSize + 'rpx', color: arrowColor }"
        v-if="!isPass"
      ></text>
      <text
        class="tui-slide-icon tui-icon-check_mark"
        :style="{ fontSize: iconSize + 'rpx', color: checkColor }"
        v-if="isPass"
      ></text>
    </view>
    <!-- #endif -->
  </view>
</template>
<!-- #ifdef APP-PLUS || MP-WEIXIN || H5 -->
<script src="./tui-slide-verify.wxs" module="parse" lang="wxs"></script>
<!-- #endif -->
<script>
import mp from './index.js'
export default {
  name: 'tuiSlideVerify',
  mixins: [mp],
  emits: ['success'],
  props: {
    //滑动条宽度 px
    slideBarWidth: {
      type: [Number, String],
      default: 300
    },
    //滑块宽度 px = 滑动条高度
    slideBlockWidth: {
      type: [Number, String],
      default: 40
    },
    //滑块border颜色
    borderColor: {
      type: String,
      default: '#E9E9E9'
    },
    //通过验证后滑块border颜色
    activeBorderColor: {
      type: String,
      default: '#19be6b'
    },
    //误差范围 px 距离右侧多少距离验证通过
    errorRange: {
      type: [Number, String],
      default: 2
    },
    //重置滑动
    resetSlide: {
      type: Number,
      default: 0
    },
    //提示文字大小
    size: {
      type: Number,
      default: 30
    },
    //提示文字颜色
    color: {
      type: String,
      default: '#444'
    },
    //验证通过后提示文字颜色
    activeColor: {
      type: String,
      default: '#fff'
    },
    //图标字体大小 rpx
    iconSize: {
      type: Number,
      default: 32
    },
    //箭头图标颜色
    arrowColor: {
      type: String,
      default: '#cbcbcb'
    },
    checkColor: {
      type: String,
      default: '#19be6b'
    },
    //滑动条背景色
    backgroundColor: {
      type: String,
      default: '#E9E9E9'
    },
    //滑过区域背景颜色
    activeBgColor: {
      type: String,
      default: '#19be6b'
    },
    //通过提示文字
    passText: {
      type: String,
      default: '验证通过'
    }
  },
  computed: {
    getBgColor() {
      return `-webkit-gradient(linear, left top, right top, color-stop(0, ${this.color}), color-stop(.4, ${this.color}), color-stop(.5, white), color-stop(.6, ${this.color}), color-stop(1, ${this.color}))`
    }
  },
  watch: {
    resetSlide(val) {
      if (val > 0) {
        this.slideReset()
      }
    }
  },
  data() {
    return {
      isPass: false,
      disabled: false,
      reset: 0
    }
  },
  methods: {
    success() {
      //验证成功
      this.isPass = true
      this.disabled = true
      this.$emit('success', {})
    },
    slideReset() {
      this.isPass = false
      this.disabled = false
      this.reset++
    }
  }
}
</script>

<style scoped>
@font-face {
  font-family: 'tuiSlideVcode';
  src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAUYAA0AAAAAB1wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAE/AAAABoAAAAci6lfG0dERUYAAATcAAAAHgAAAB4AKQALT1MvMgAAAaAAAABCAAAAVjxuSCZjbWFwAAAB+AAAAEUAAAFK5n3pi2dhc3AAAATUAAAACAAAAAj//wADZ2x5ZgAAAkwAAAD8AAABJDQ/n7JoZWFkAAABMAAAADAAAAA2GSR8FGhoZWEAAAFgAAAAHQAAACQHygOFaG10eAAAAeQAAAARAAAAEgwUAD5sb2NhAAACQAAAAAwAAAAMAFQAkm1heHAAAAGAAAAAHgAAACABEQA6bmFtZQAAA0gAAAFJAAACiCnmEVVwb3N0AAAElAAAAD0AAABPYJEgVXjaY2BkYGAA4oqPSw3j+W2+MnCzMIDAbaY5nHBa5P905jfMeUAuBwMTSBQAHycKCHjaY2BkYGBu+N/AEMPCAALMbxgYGVABCwBYegNYAAAAeNpjYGRgYGBl0GNgYgABEMkFhAwM/8F8BgANfQFMAAB42mNgZGFgnMDAysDA1Ml0hoGBoR9CM75mMGLkAIoysDIzYAUBaa4pDA7PGJ6ZMDf8b2CIYW5gaAAKM4LkAN6ZDA8AAHjaY2GAABYItmMQAQABaABfAAAAeNpjYGBgZoBgGQZGBhBwAfIYwXwWBg0gzQakGRmYnjE8M/n/n4EBQksxS16AqgcCRjYGOIeRCUgwMaACRoZhDwDR6wnSAAAAAAAAAAAAAAAAVACSeNpFzjFOwzAYxfHv2Yodu4ozxHEq2qoSEilLQYoqh6lIIBaugMTC3hswMcPQhYmBjV4AMSFxAppjQDmDSzJle9L7DX9itNx/8i9+QY7mRPDn8ItTlDOcQLhCwcBVtWLCOl/D10v0L5vHnAGMx+EuLSctvQ8PBpMyxWU30/GxwUvMwXqDW6lkNIikllgnGM1MeAqPyWxkeNktczRGgrXUXOkeETGy+2f+x1c0oGnbKUg6KjzVJWUQh23TwlfTrhW+cpZRE3ZCIG8a5EKE3U34yM/sRttCb5hiuNLDjK+i8PO9Db8igmu2cOE1vNsWDTP9xhiuVXZARP+yvTqbeNp9kD1OAzEQhZ/zByQSQiCoXVEA2vyUKRMp9Ailo0g23pBo1155nUg5AS0VB6DlGByAGyDRcgpelkmTImvt6PObmeexAZzjGwr/3yXuhBWO8ShcwREy4Sr1F+Ea+V24jhY+hRvUf4SbuFUD4RYu1BsdVO2Eu5vSbcsKZxgIV3CKJ+Eq9ZVwjfwqXMcVPoQb1L+EmxjjV7iFa2WpDOFhMEFgnEFjig3jAjEcLJIyBtahOfRmEsxMTzd6ETubOBso71dilwMeaDnngCntPbdmvkon/mDLgdSYbh4FS7YpjS4idCgbXyyc1d2oc7D9nu22tNi/a4E1x+xRDWzU/D3bM9JIbAyvkJI18jK3pBJTj2hrrPG7ZynW814IiU68y/SIx5o0dTr3bmniwOLn8owcfbS5kj33qBw+Y1kIeb/dTsQgil2GP5PYcRkAAAB42mNgYoAALjDJyIAOWMGiTIxMjMyCOalpJbop+aVJOam6iUVF+eUCKaWZ6fmlJZmJeckZ+XnpugDvDw1eAAAAAAAAAf//AAIAAQAAAAwAAAAWAAAAAgABAAMABAABAAQAAAACAAAAAHjaY2BgYGQAgqtL1DlA9G2mOZwwGgA1wQSuAAA=)
    format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.tui-slide-icon {
  font-family: 'tuiSlideVcode' !important;
  font-size: 34rpx;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
}

.tui-icon-check_mark:before {
  content: '\e634';
}

.tui-icon-double_arrow:before {
  content: '\e600';
}

.tui-slide-vcode {
  background-color: #eaeef1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tui-slide-glided {
  width: 0;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.tui-slider-block {
  position: absolute;
  z-index: 2;
  background-color: #ffffff;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1rpx solid;
  box-sizing: border-box;
  left: 0;
  top: 0;
  transition: border-color 0.08s;
}

.tui-text-flashover {
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-animation: animate 1.8s infinite;
}

@-webkit-keyframes animate {
  from {
    background-position: -90rpx;
  }

  to {
    background-position: 90rpx;
  }
}

@keyframes animate {
  from {
    background-position: -90rpx;
  }

  to {
    background-position: 90rpx;
  }
}

.tui-active__text {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 0;
  color: #fff;
}

.tui-slider__reset {
  transition: transform 0.25s;
}
</style>
